<template>
  <div class="container">
    <div class="info">
      <span class="words">信息查询</span>
      <!--信息查询表单-->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!--选择商家栏-->
        <el-form-item label="商家" prop="region2" style="width:250px">
          <el-select v-model="ruleForm.region2" placeholder="全部">
            <el-option label="商家一" value=""></el-option>
            <el-option label="商家二" value=""></el-option>
          </el-select>
        </el-form-item>
        <!--商品编码输入框-->
        <el-form-item label="商品编码" prop="code">
          <el-input v-model="ruleForm.code" style="width:250px"></el-input>
        </el-form-item>

        <!--选择拟合仓栏-->
        <el-form-item
          label="拟合仓"
          prop="region4"
          style="width:250px"
          id="repertory"
        >
          <el-select v-model="ruleForm.region4" placeholder="请选择">
            <el-option label="拟合仓一" value=""></el-option>
            <el-option label="拟合仓二" value=""></el-option>
          </el-select>
        </el-form-item>
          <!--商品名称-->
        <el-form-item label="商品名称" prop="productName" id="productName">
          <el-input
            v-model="ruleForm.productName"
            style="width:250px"
          ></el-input>
        </el-form-item>
        <!--总库存栏-->
        <div id="availableCount">
          <el-form-item :inline="true" prop="number1" label="虚拟总库存"> 
              <el-input
                v-model="ruleForm.number1"
                style="width: 5%;"
              ></el-input>
            <span>-</span>
              <el-input
                v-model="ruleForm.number1"
                style="width: 5%;"
              ></el-input>
          </el-form-item>
          <el-form-item prop="number2" id="number2"> </el-form-item>
        </div>
        
        <!--可售库存栏-->
        <div id="availableCount">
          <el-form-item :inline="true" prop="number1" label="虚拟可售库存" >
              <el-input
                v-model="ruleForm.number1"
                style="width: 5%;"
              ></el-input>
            <span>-</span>
              <el-input
                v-model="ruleForm.number1"
                style="width: 5%;"
              ></el-input>
          </el-form-item>
          <el-form-item prop="number2" id="number2"> </el-form-item>
        </div>
        <!--底部按钮栏-->
        <el-form-item class="formFooter">
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            class="button1"
            >查询</el-button
          >
          <el-button @click="resetForm('ruleForm')" class="button2"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!--间隔栏-->
    <div class="spacer"></div>
    <!--信息展示栏-->
    <div class="infoShow">
      <!--导出按钮-->
      <el-button type="primary" class="output" size="small">导出</el-button>
      <!--查看任务按钮-->
      <el-button type="primary" class="missonWatch" size="small"
        >查看任务</el-button
      >
      <!--信息表格-->
      <el-table :data="tableData" border style="width: 100%;" stripe>
        <el-table-column type="selection" width="55"> </el-table-column>
         <el-table-column prop="shops" label="商家" width="180">
        </el-table-column>
        <el-table-column prop="ir" label="拟合仓" width="180">
        </el-table-column>
        <el-table-column prop="goodsCode" label="商品编码"> </el-table-column>
        <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
        <el-table-column prop="unit" label="计量单位"> </el-table-column>
        <el-table-column prop="store" label="店铺" width="180">
        </el-table-column>         
         <el-table-column prop="tcount" label="虚拟总库存"> </el-table-column>
         <el-table-column prop="fcount" label="虚拟冻结库存"> </el-table-column>
        <el-table-column prop="acount" label="虚拟可售库存"> </el-table-column>
      </el-table>
    </div>
    <!--分页器-->
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        code: "",
        sheetCode: "",
        productName: "",
        region1: "",
        region2: "",
        region3: "",
        region4: "",
        date1: "",
        date2: "",
        number1: "",
        number2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        checked: false
      },
      currentPage4: 4,
      tableData: [
        {
          shops: "2",
          store:'1',
          ir:'3',
          irstyle:'1',
          tcount:'19',
          fcount:'20',
          acount:'21',
          unit: "8",
        },
        {
          shops: "2",
          store:'1',
          ir:'3',
          irstyle:'1',
          tcount:'19',
          fcount:'20',
          acount:'21',
          unit: "8",
        }
      ],
      rules: {
        code: [
          { required: true, message: "请输入商品编码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        sheetCode: [
          { required: true, message: "请输入单据编号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        productName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region1: [
          { required: false, message: "请选择来源单据类型", trigger: "change" }
        ],
        region2: [
          { required: false, message: "请选择商家", trigger: "change" }
        ],
        region3: [
          { required: false, message: "请选择操作类型", trigger: "change" }
        ],
        region4: [
          { required: false, message: "请选择仓库", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: false,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: false,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        number1: [
          { required: false, message: "请输入最少数量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        number2: [
          { required: false, message: "请输入最大数量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang="scss" scoped>
body {
  padding: 0;
  margin: 0;
}
.container {
  background-color: #fff;
  .info {
    .words {
      display: block;
      background-color: rgb(238, 224, 224);
      line-height: 40px;
      font-size: 12px;
      padding-left: 10px;
      margin-bottom: 10px;
      text-align: left;
      font-weight: 700;
      border-radius: 20px;
      padding-left: 20px;
    }
    .demo-ruleForm {
      position: relative;
      margin-left: 200px;
      .el-input__inner {
        // width: 250px;
        height: 30px;
      }
      .el-date-picker {
        width: 125px;
      }
      .el-input--suffix {
        width: 250px;
      }
      .el-date-editor {
        width: 120px;
      }
      .el-form-item__content {
        width: 17% ;
      }
      #store{
        position: absolute;
        top: 0;
        right: 30%;
      }
      #irstyle{
        position: absolute;
        top: 25%;
        right: 30%
      }
      #sheetCode {
        position: absolute;
        top: 18%;
        left: 30%;
      }
      #shops {
        position: absolute;
        top: 0;
        left: 30%;
      }
      #behaviorKinds {
        position: absolute;
        top: 36%;
        left: 30%;
      }
      #repertory {
        position: absolute;
        top: 0;
        left: 30%;
      }
      #productName {
        position: absolute;
        top: 30%;
        left: 30%;
      }
      #handleCount {
        position: absolute;
        top: 25%;
        left: 30%;
        .el-form-item {
          width: 70%;
        }
        #availableCount {
          width: 200px;
          height: 50px;
          position: absolute;
          top: 45%;
          left: 30%;
          .el-form-item {
            width: 70%;
          }
        }
      }
      .formFooter {
        width: 100%;
        position: relative;
        display: block;
        // height: 50px;
        .button1 {
          position: absolute;
          left: 30%;
          transform: translateX(-50%);
          top: 0;
        }
        .button2 {
          position: absolute;
          left: 35%;
          top: 0;
          transform: translateX(-50%);
        }
      }
    }
  }
  .spacer {
    background-color: rgb(238, 224, 224);
    height: 20px;
    margin-top: 50px;
  }
  .infoShow {
    position: relative;
    margin-top: 15px;
    .output {
      float: left;
      // margin-top: 5px;
      margin-right: 10px;
      margin-bottom: 5px;
    }
    .missonWatch {
     float: left;
    //  margin-top: 5px;
     margin-bottom: 5px;
    }
  }
  .footer {
    float: right;
  }
}
</style>
